<template>
  <div class="shopcar-container">
    <van-swipe-cell v-for="item in carList" :key="item.id" right-width="44">
      <div class="shopcart-box">
        <van-checkbox
          class="checked"
          v-model="item.checked"
          @click="chechdCell"
          checked-color="#F63515"
        ></van-checkbox>
        <div class="cell" @click="pushDetal($event)">
          <img :src="item.imageHost + item.mainImage" />
          <div class="shopcart-item-info">
            <p class="shopcart-name">
              {{ item.name }}
            </p>
            <p class="shopcart-subtitle">{{ item.subtitle }}!!</p>
            <div class="shopcart-stepper">
              <span class="shopcart-price">￥{{ item.price }}</span>
              <van-stepper v-model="item.count" min="1" max="20" @plus="handPlus(item)" @minus="handMinus(item)" />
            </div>
          </div>
        </div>
      </div>
      <template slot="right">
        <!-- 会产生事件冒泡 -->
        <van-button
          square
          type="danger"
          text="删除"
          class="btn"
          @click="delCarItem(item)"
          
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
export default {
  props: {
    carList: {
      type: Array,
    },
  },
  data() {
    return {
      checked: false,
      value: 1,
    };
  },
  methods: {
    chechdCell() {
      console.log("按钮点击");
      // 选择框点击后
      // 执行方法判断，全选框是否选中
      this.$store.dispatch("changeChecked");
    },
    pushDetal(e) {
      if (e.target.className.indexOf("stepper") == -1) {
        console.log("跳转到详情页", e);
      }
    },
    // 删除数据
    delCarItem(item) {
      // 触发父组件删除对应数据，
      // 组件做业务扭转，不发送任何单一数据，功能更单一，明确
      this.$emit("handDelCarItem", item.id);
    },

    // 增加数量
    handPlus(item) {
      this.$emit('calculateCount', {productId: item.productId , count: 1})
    },
    // 数量减小
    handMinus(item) {
      this.$emit('calculateCount', {productId: item.productId , count: -1})
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../../common/style/mixin";

.shopcar-container {
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    height: 200px;
    .cell {
      display: flex;
      justify-content: space-around;
      background: #fff;
      height: 200px;
    }
    .checked {
      width: 68px;
    }
    img {
      width: 180px;
      height: 180px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex: 70%;
      flex-direction: column;
      justify-content: space-between;

      .shopcart-name {
        height: 70px;
        font-size: 26px;
        overflow: hidden;
      }

      .shopcart-subtitle {
        font-size: 24px;
        color: #999;
      }

      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shopcart-price {
          font-size: 30px;
          color: $red;
        }
      }
    }
  }
  .van-button {
    height: 200px;
  }
}
</style>
<style>
.btn {
  width: 104px;
}
</style>